<template>
  <div class="">
    <p>
      count is {{ count }}
      &nbsp;&nbsp;
      <button @click="clickMe">+1</button>
    </p>
  </div>
</template>

<script>
export default {
  name: '05-Watch'
}
</script>

<script setup>
import { ref, reactive, watch } from 'vue'
const count = ref(100)
const person = reactive({
  name: '邹思敏',
  age: 30,
  address: {
    province: '湖南省',
    city: '湘西'
  }
})

const clickMe = () => {
  count.value++
}

// 监听普通的值类型
// 要监听的是响应式数据，所以这里不要写成 count.value
watch(count, (val, oldValue) => {
  console.log('---val---', val, oldValue)
})

// 监听整个对象
// watch(person, val => {
//   console.log('new---', val)
// })

// 监听对象中的第一层某个属性
// watch(
//   () => person.name,
//   val => {
//     console.log('---val---', val)
//   }
// )

// 监听对象中的第一层的某个属性，但是它的值是引用类型
/**
 * 参数1：监听对象中的引用类型
 * 参数2：执行的回调函数
 * 参数3：其它配置（深度监听和立即执行）
 */
watch(
  () => person.address,
  val => {
    console.log('---val---', val)
  },
  {
    deep: true, // 深度监听
    immediate: true // 立即执行
  }
)
</script>

<style scoped></style>
